<template>
  <div class="basic-box">
    <div class="header">
      <div class="left">
        <div>
          <div v-for="(item,index) in expenditureMap" :key="index" class="cell">
            <div v-if="item.key !== 'invoices'" class="title">
              {{ item.title }} :&nbsp;
            </div>
            <div v-if="item.key !== 'invoices'" class="content">
              {{ expenditureDetail[item.key] }}
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <el-button icon="el-icon-edit" type="primary" @click="toEditMode">编辑</el-button>
      </div>
    </div>
    <div class="summary">
      <div class="summary-title">
        发票 :
      </div>
      <div style="display: flex;flex-direction: column;overflow: auto">
        <el-image v-for="(item,index) in expenditureDetail.invoices" :key="index" :src="item.url" fit="scale-down" style="height: 400px" />
      </div>
    </div>
    <el-dialog title="编辑报销状态" :visible.sync="isEditMode" width="20%">
      <el-select v-model="editData.status" placeholder="报销状态" clearable class="filter-item">
        <el-option v-for="item in calendarStatusOptions" :key="item.key" :label="item.display_name" :value="item.key" />
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button>撤 销 修 改</el-button>
        <el-button type="primary">确 定 修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { fetchExpenditureDetail } from '@/api/expenditure'
const calendarStatusOptions = [
  { key: '拒绝', display_name: '拒绝' },
  { key: '申请中', display_name: '申请中' },
  { key: '接受', display_name: '接受' }
]
export default {
  name: 'ExpenditureDetail',
  data() {
    return {
      isEditMode: false,
      orgName: '肥宅俱乐部',
      calendarStatusOptions,
      expenditureDetail: {
        name: '',
        userId: '',
        money: '',
        org: '',
        status: '',
        class: '',
        invoices: []
      },
      editData: {},
      categoryList: [
        { value: '0', label: '禁用' },
        { value: '1', label: '启用' }
      ],
      expenditureMap: [
        { key: 'username', title: '报销人名称' },
        { key: 'orgName', title: '社团' },
        { key: 'total', title: '金额' },
        { key: 'reason', title: '用途' },
        { key: 'status', title: '状态' },
        { key: 'invoices', title: '发票' }
      ]
    }
  },
  created() {
    if (!this.$store.getters.isAdmin) {
      this.$notify({
        title: 'Error',
        message: '你无权访问该页面',
        type: 'error',
        duration: 500
      })
      this.$store.dispatch('tagsView/delVisitedView', this.$route)
      this.$router.go(-1)
    } else {
      this.getList()
    }
    this.fetchInfo()
  },
  methods: {
    setTagsViewTitle() {
      console.log(this.name)
      this.$route.meta.title = this.org
      const currentView = this.$store.getters.visitedViews[this.$store.getters.visitedViews.findIndex(
        (item) => item.path === this.$route.path
      )]
      if (currentView != null) {
        currentView.title = this.org
      }
      // this.$store.getters.breadcrumb.getBreadcrumb()
      // const route = Object.assign({}, this.tempRoute, { title: `${this.name}`})
      // this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    setPageTitle() {
      document.title = `${this.org}`
    },
    fetchInfo() {
      const id = this.$route.params && this.$route.params.id
      fetchExpenditureDetail(id).then(
        res => {
          console.log(res)
          this.org = res.data.items.orgName + '报销请求'
          this.setPageTitle()
          this.setTagsViewTitle()
          this.expenditureDetail = res.data.items
        }
      )
    },
    toEditMode() {
      this.isEditMode = true
      this.editData = this.expenditureDetail
    },
    destroyDialog() {
      this.editData = {}
      this.isEditMode = false
    }
  }
}
</script>

<style scoped lang="scss">
  .basic-box{
    margin-top: 40px;
    padding: 30px 5%;
    border-radius: 10px;
    width: 100%;
  }
  .header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .left{
      width: 80%;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      .cover{
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
      }
    }
    .right{
      /*width: 20%;*/
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      /*margin-right: 20px;*/
      /*justify-content: flex-end;*/
    }
  }
  .cell{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin:10px;
    .title{
      font-size: 20px;
      font-weight:800;
      color: #11A983;
    }
    .title-edit{
      font-size: 20px;
      font-weight:800;
      color: #11A983;
      width: 150px;
    }
    .content{
      font-size: 20px;
      font-weight: 500;
      width: 300px;
    }
  }

</style>
